import React from 'react';
import { Input, Radio, Select, Row, Col, Form } from 'antd'
const RadioGroup = Radio.Group;
const FormItem = Form.Item;
import ExpenseTypeTransfer from 'containers/setting/form/form-detail/expense-allocation/expense-type-transfer'

/**
 * 费用分配组件
 */
class ExpenseAllocation extends React.Component {

  constructor(props) {
    super(props);
    this.state = {
      visibleExpenseTypeScope: '',
      expenseTypeCode: '',
      showTransfer: false,
      selectedList: [],
      value: {},
      selectedVendorExpenseType: [],
      selectedSystemExpenseType: [],
      selectedCustomExpenseType: [],
    };
  }

  componentWillMount(){
    let model = this.props.value;
    model && this.setState({ visibleExpenseTypeScope: model.type, selectedList: model.values, value: model.values });
  }

  componentWillReceiveProps(nextProps) {
    let model = nextProps.value;
    model && this.setState({ visibleExpenseTypeScope: model.type, selectedList: model.values, value: model.values });
  }

  handleOk = (result) => {
    const { visibleExpenseTypeScope } = this.state;
    this.setState({ showTransfer: false });
    this.props.onChange({visibleExpenseTypeScope, expenseTypes: result});
  };

  onChangeRadio = (e) => {
    let visibleExpenseTypeScope = e.target.value;
    this.setState({ visibleExpenseTypeScope });
    this.props.onChange({visibleExpenseTypeScope, expenseTypes: []});
  };

  render() {
    const {
      visibleExpenseTypeScope,
      expenseTypeCode,
      showTransfer,
      selectedVendorExpenseType,
      selectedSystemExpenseType,
      selectedCustomExpenseType
    } = this.state;
    const { } = this.props;
    const formItemLayout = {
      labelCol: { span: 4 },
      wrapperCol: { span: 8, offset: 1 },
    };
    return (
      <div className="expense-allocation">
        <Row>
          <Col span={8} offset={5}>
            <RadioGroup onChange={this.onChangeRadio}
                        value={visibleExpenseTypeScope}>
              <Radio value={1001}>全部类型</Radio>
              <Radio value={1002}>部分类型</Radio>
            </RadioGroup>
          </Col>
        </Row>
        {visibleExpenseTypeScope === 1002 && (
            <div className="expense-type-scope">
              <FormItem {...formItemLayout} label="供应商费用">
                <div className="expense-type-text"
                     onClick={() => this.setState({showTransfer: true, expenseTypeCode: 'vendor'})}/>
              </FormItem>
              <FormItem {...formItemLayout} label="系统费用">
                <div className="expense-type-text"
                     onClick={() => this.setState({showTransfer: true, expenseTypeCode: 'system'})}/>
              </FormItem>
              <FormItem {...formItemLayout} label="自定义费用">
                <div className="expense-type-text"
                     onClick={() => this.setState({showTransfer: true, expenseTypeCode: 'custom'})}/>
              </FormItem>
            </div>
        )}
        <ExpenseTypeTransfer type={expenseTypeCode}
                             onOk={this.handleOk}
                             onCancel={() => this.setState({ showTransfer: false })}
                             visible={showTransfer}/>
      </div>
    );
  }
}

ExpenseAllocation.propTypes = {
  onChange: React.PropTypes.func,  //进行选择后的回调
  value: React.PropTypes.object
};

ExpenseAllocation.defaultProps = {

};

export default ExpenseAllocation;
